<template>
	<div id="acf">
		
		<img v-show="isReady && sourceStore.imgUrl" :src="sourceStore.imgUrl" class="acf-img" />
		
		<CompControl :isReady="isReady" />
		
		<CompCanvas :isReady="isReady" />
		
		<CompOpts />
		
		<CompLoad @next="startFun" />
		
	</div>
</template>

<script>
	
	import { defineComponent } from 'vue';
	
	export default defineComponent({
		name: 'ACF'
	})
	
</script>

<script setup>
	
	import { ref, reactive, computed, watch, unref, onMounted, onBeforeUnmount, nextTick, provide, readonly } from 'vue';
	import * as $audio from './audio';
	import CompLoad from './CompLoad';
	import CompControl from './CompControl';
	import CompOpts from './CompOpts';
	import CompCanvas from './CompCanvas';
	import useFeedbackStore from './useFeedbackStore';
	import useSoundStore from './useSoundStore';
	import useSourceStore from './useSourceStore';
	
	const feedbackStore = useFeedbackStore();
	const soundStore = useSoundStore();
	const sourceStore = useSourceStore();
	
	const isReady = ref(false);
	
	onMounted(() => {
		isReady.value = false;
		feedbackStore.init();
	})
	
	onBeforeUnmount(() => {
		$audio.media.pause();
		soundStore.clearAllSound();
		URL.revokeObjectURL(sourceStore.imgUrl);
		URL.revokeObjectURL(sourceStore.audioUrl);
		isReady.value = false;
	})
	
	function startFun() {
		$audio.media.src = sourceStore.audioUrl;
		$audio.connectNodes().then(() => {
			isReady.value = true;
		});
	}
	
</script>

<style lang="scss" scoped>
	
	#acf {
		width: 100%;
		height: 100%;
		background: center / cover linear-gradient(135deg, #3498db, #1abc9c);
		position: relative;
		overflow: hidden;
		z-index: 1;
	}
	
	.acf-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -1;
	}
	
</style>